import {Form, Modal, Row, Col, Input, Select, InputNumber} from 'antd';
import {useEffect} from 'react';
import {connect} from 'umi';

const DataForm = (props) => {
  const {dispatch, submitting, userList} = props;
  const {dataForm, setDataForm, tablePayload, setTablePayload} = props.data;
  const [form] = Form.useForm();

  /* 获取用户列表 */
  useEffect(() => {
    dispatch({
      type: 'TenantCommon/fetchUserList',
      payload: {},
    });
  }, [dispatch]);

  // 初始化表单数据
  useEffect(() => {
    if (!dataForm || !dataForm.data) {
      form.setFieldsValue({status: 1, orderby: 0});
    }
    if (dataForm && dataForm.data) {
      form.setFieldsValue({...dataForm.data, headIds: dataForm.data?.headIds ?? undefined});
    }
    if (dataForm && dataForm.parent) {
      form.setFieldsValue({pid: dataForm.parent.id});
    }
  }, [dataForm, form]);

  /* 确定操作 */
  function onOk() {
    form.validateFields().then(values => {
      if (submitting) {
        return;
      }
      let keys = Object.keys(values);
      keys.forEach(d => {
        values[d] = values[d] === null ? undefined : values[d];
      });
      dispatch({
        type: values.id ? 'PSystemDept/edit' : 'PSystemDept/add',
        payload: values,
        callback: () => {
          onCancel();
          setTablePayload({...tablePayload});
        },
      });
    });
  }

  /* 取消操作 */
  function onCancel() {
    setDataForm(undefined);
    form.resetFields();
  }

  return (
    <Modal
      confirmLoading={submitting}
      title={dataForm ? dataForm.title : ''}
      open={dataForm ? dataForm.visible : false}
      onOk={onOk}
      onCancel={onCancel}
      forceRender={true}
      width={600}
      bodyStyle={{paddingTop: 24}}
    >
      <Form layout='horizontal' labelCol={{span: 5}} form={form}>
        {dataForm && dataForm.data && (
          <Form.Item name='id' hidden={true}>
            <Input/>
          </Form.Item>
        )}
        {dataForm && dataForm.parent && (
          <Form.Item name='pid' hidden={true}>
            <Input/>
          </Form.Item>
        )}
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='deptName' label='部门名称'
              rules={[
                {required: true, message: '部门名称不能为空'},
              ]}>
              <Input placeholder='请输入部门名称'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='status' label='当前状态'
              rules={[
                {required: true, message: '当前状态不能为空'},
              ]}
            >
              <Select placeholder='请选择当前状态'>
                <Select.Option value={1}>正常</Select.Option>
                <Select.Option value={0}>停用</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='orderby' label='排序属性'
              rules={[
                {required: true, message: '排序属性不能为空'},
              ]}>
              <InputNumber style={{width: '100%'}} placeholder='请输入排序属性'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='headIds' label='部门负责人'
              rules={[
                {required: false, message: '部门负责人不能为空'},
              ]}>
              <Select
                placeholder='请选择部门负责人' options={userList} mode='multiple'
                maxTagCount={2} allowClear showSearch
                filterOption={(input, option) => (option?.label ?? '').includes(input)}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='tel' label='部门电话'
              rules={[
                {required: false, message: '部门电话不能为空'},
              ]}>
              <Input placeholder='请输入部门电话'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='email' label='部门邮箱'
              rules={[
                {required: false, message: '部门邮箱不能为空'},
              ]}>
              <Input placeholder='请输入部门邮箱'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='remark' label='备注信息'
              rules={[
                {required: false, message: '备注信息不能为空'},
              ]}
            >
              <Input.TextArea rows={3} placeholder='请输入备注信息'/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};


export default connect(({loading, TenantCommon}) => {
  return {
    submitting: loading.effects['PSystemDept/add'] || loading.effects['PSystemDept/edit'],
    userList: TenantCommon.userList,
  };
})(DataForm);

